<!-- 配置 -->
<template>
  <div>
    <el-form-item label="配置列表">
      <el-button size="mini"
                 type="primary"
                 @click="openCode">Edit</el-button>
    </el-form-item>
    <codeedit @submit="codeClose"
              v-model="code.content"
              :visible.sync="code.box"></codeedit>
    <el-form-item label="透明度">
      <el-slider v-model="main.activeOption.opacity"></el-slider>
    </el-form-item>
    <el-form-item label="缩放">
      <el-slider v-model="main.activeOption.scale" :min="1" :max="10"></el-slider>
    </el-form-item>
    <el-form-item label="X旋转度">
      <el-slider v-model="main.activeOption.rotateX" :min="min" :max="max"></el-slider>
    </el-form-item>
    <el-form-item label="Y旋转度">
      <el-slider v-model="main.activeOption.rotateY" :min="min" :max="max"></el-slider>
    </el-form-item>
    <el-form-item label="Z旋转度">
      <el-slider v-model="main.activeOption.rotateZ" :min="min" :max="max"></el-slider>
    </el-form-item>
    <el-form-item label="进入动画">
      <l-select 
          :options="animateOptions" 
          v-model="main.activeOption.animateValue"
          @change="handleChangeAnimate" >
        </l-select>
    </el-form-item>
  </div>
</template>

<script>
import codeedit from '../../views/build/group/code';
export default {
  inject: ["main"],
  components: {
    codeedit
  },
  data () {
    return {
      code: {
        box: false,
        content: '',
        type:'echartFormatter'
      },
      min: -360,
      max: 360,
      animateOptions: [
        {label: '弹跳', value: 'bounce'},
        {label: '放大缩小弹簧', value: 'bounceIn'},
        {label: '向下长距进入', value: 'fadeInDownBig'},
        {label: '向右长距进入', value: 'fadeInLeftBig'},
        {label: '向左长距进入', value: 'fadeInRightBig'},
        {label: '向上长距进入', value: 'fadeInUpBig'},
        {label: 'Y轴旋转', value: 'flip'},
        {label: '中心X轴旋转', value: 'flipInX'},
        {label: '中心Y轴旋转', value: 'flipInY'},
      ]
    }
  },
  methods: {
     handleChangeAnimate(val) {
      if (val) {
        this.$set(this.main.activeOption, 'animateValue', val.value)
      } else {
        this.$set(this.main.activeOption, 'animateValue', '')
      }
    },
    codeClose (value) {
      this.main.activeObj[this.code.type] = value;
    },
    openCode () {
      this.code.content = this.main.activeObj[this.code.type];
      this.code.box = true;
    },
  }
}
</script>

<style>
</style>